<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta name="referrer" content="never">
  <meta name="referrer" content="no-referrer">
  <link href="http://p3.music.126.net/tBTNafgjNnTL1KlZMt7lVA==/18885211718935735.jpg" rel="shortcut icon">
  <style>
    html,
    body {
      overflow-x: hidden;
      overflow-y: auto;
    }

    body {
      position: relative;
      font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
    }

    #load {
      width: 100vw;
      height: 100vh;
      display: none;
      overflow: hidden;
      background-color: #dd001b;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      font-size: 10px;
      z-index: 999;
    }

    .index-title {
      position: absolute;
      top: 2.3em;
      width: 100%;
      color: #fff;
      font-size: 4.6em;
      line-height: 1.5;
      text-align: center;
      opacity: 0;
      animation: titleIn 1s both;
    }

    .index-icon {
      position: absolute;
      bottom: 3em;
      font-size: 2em;
      line-height: 1.5;
      width: 100%;
      color: #fff;
      text-align: center;
      float: right;
      opacity: 0;
      animation: iconIn 3s 2s both;
    }

    @keyframes titleIn {
      100% {
        opacity: 1;
      }
    }

    @keyframes iconIn {
      100% {
        opacity: 1;
      }
    }
  </style>
  <title>music-player</title>
  <script>
    !function (t, e) { "use strict"; "function" == typeof define && define.amd ? define([], function () { return t.Waves = e.call(t), t.Waves }) : "object" == typeof exports ? module.exports = e.call(t) : t.Waves = e.call(t) }("object" == typeof global ? global : this, function () { "use strict"; function t(t) { return null !== t && t === t.window } function e(e) { return t(e) ? e : 9 === e.nodeType && e.defaultView } function n(t) { var e = typeof t; return "function" === e || "object" === e && !!t } function o(t) { return n(t) && t.nodeType > 0 } function a(t) { var e = f.call(t); return "[object String]" === e ? d(t) : n(t) && /^\[object (Array|HTMLCollection|NodeList|Object)\]$/.test(e) && t.hasOwnProperty("length") ? t : o(t) ? [t] : [] } function i(t) { var n, o, a = { top: 0, left: 0 }, i = t && t.ownerDocument; return n = i.documentElement, void 0 !== t.getBoundingClientRect && (a = t.getBoundingClientRect()), o = e(i), { top: a.top + o.pageYOffset - n.clientTop, left: a.left + o.pageXOffset - n.clientLeft } } function r(t) { var e = ""; for (var n in t) t.hasOwnProperty(n) && (e += n + ":" + t[n] + ";"); return e } function s(t, e, n) { if (n) { n.classList.remove("waves-rippling"); var o = n.getAttribute("data-x"), a = n.getAttribute("data-y"), i = n.getAttribute("data-scale"), s = n.getAttribute("data-translate"), u = 350 - (Date.now() - Number(n.getAttribute("data-hold"))); u < 0 && (u = 0), "mousemove" === t.type && (u = 150); var c = "mousemove" === t.type ? 2500 : v.duration; setTimeout(function () { var t = { top: a + "px", left: o + "px", opacity: "0", "-webkit-transition-duration": c + "ms", "-moz-transition-duration": c + "ms", "-o-transition-duration": c + "ms", "transition-duration": c + "ms", "-webkit-transform": i + " " + s, "-moz-transform": i + " " + s, "-ms-transform": i + " " + s, "-o-transform": i + " " + s, transform: i + " " + s }; n.setAttribute("style", r(t)), setTimeout(function () { try { e.removeChild(n) } catch (t) { return !1 } }, c) }, u) } } function u(t) { if (!1 === h.allowEvent(t)) return null; for (var e = null, n = t.target || t.srcElement; n.parentElement;) { if (!(n instanceof SVGElement) && n.classList.contains("waves-effect")) { e = n; break } n = n.parentElement } return e } function c(t) { var e = u(t); if (null !== e) { if (e.disabled || e.getAttribute("disabled") || e.classList.contains("disabled")) return; if (h.registerEvent(t), "touchstart" === t.type && v.delay) { var n = !1, o = setTimeout(function () { o = null, v.show(t, e) }, v.delay), a = function (a) { o && (clearTimeout(o), o = null, v.show(t, e)), n || (n = !0, v.hide(a, e)), r() }, i = function (t) { o && (clearTimeout(o), o = null), a(t), r() }; e.addEventListener("touchmove", i, !1), e.addEventListener("touchend", a, !1), e.addEventListener("touchcancel", a, !1); var r = function () { e.removeEventListener("touchmove", i), e.removeEventListener("touchend", a), e.removeEventListener("touchcancel", a) } } else v.show(t, e), m && (e.addEventListener("touchend", v.hide, !1), e.addEventListener("touchcancel", v.hide, !1)), e.addEventListener("mouseup", v.hide, !1), e.addEventListener("mouseleave", v.hide, !1) } } var l = l || {}, d = document.querySelectorAll.bind(document), f = Object.prototype.toString, m = "ontouchstart" in window, v = { duration: 750, delay: 200, show: function (t, e, n) { if (2 === t.button) return !1; e = e || this; var o = document.createElement("div"); o.className = "waves-ripple waves-rippling", e.appendChild(o); var a = i(e), s = 0, u = 0; "touches" in t && t.touches.length ? (s = t.touches[0].pageY - a.top, u = t.touches[0].pageX - a.left) : (s = t.pageY - a.top, u = t.pageX - a.left), u = u >= 0 ? u : 0, s = s >= 0 ? s : 0; var c = "scale(" + e.clientWidth / 100 * 3 + ")", l = "translate(0,0)"; n && (l = "translate(" + n.x + "px, " + n.y + "px)"), o.setAttribute("data-hold", Date.now()), o.setAttribute("data-x", u), o.setAttribute("data-y", s), o.setAttribute("data-scale", c), o.setAttribute("data-translate", l); var d = { top: s + "px", left: u + "px" }; o.classList.add("waves-notransition"), o.setAttribute("style", r(d)), o.classList.remove("waves-notransition"), d["-webkit-transform"] = c + " " + l, d["-moz-transform"] = c + " " + l, d["-ms-transform"] = c + " " + l, d["-o-transform"] = c + " " + l, d.transform = c + " " + l, d.opacity = "1"; var f = "mousemove" === t.type ? 2500 : v.duration; d["-webkit-transition-duration"] = f + "ms", d["-moz-transition-duration"] = f + "ms", d["-o-transition-duration"] = f + "ms", d["transition-duration"] = f + "ms", o.setAttribute("style", r(d)) }, hide: function (t, e) { for (var n = (e = e || this).getElementsByClassName("waves-rippling"), o = 0, a = n.length; o < a; o++)s(t, e, n[o]); m && (e.removeEventListener("touchend", v.hide), e.removeEventListener("touchcancel", v.hide)), e.removeEventListener("mouseup", v.hide), e.removeEventListener("mouseleave", v.hide) } }, p = { input: function (t) { var e = t.parentNode; if ("i" !== e.tagName.toLowerCase() || !e.classList.contains("waves-effect")) { var n = document.createElement("i"); n.className = t.className + " waves-input-wrapper", t.className = "waves-button-input", e.replaceChild(n, t), n.appendChild(t); var o = window.getComputedStyle(t, null), a = o.color, i = o.backgroundColor; n.setAttribute("style", "color:" + a + ";background:" + i), t.setAttribute("style", "background-color:rgba(0,0,0,0);") } }, img: function (t) { var e = t.parentNode; if ("i" !== e.tagName.toLowerCase() || !e.classList.contains("waves-effect")) { var n = document.createElement("i"); e.replaceChild(n, t), n.appendChild(t) } } }, h = { touches: 0, allowEvent: function (t) { var e = !0; return /^(mousedown|mousemove)$/.test(t.type) && h.touches && (e = !1), e }, registerEvent: function (t) { var e = t.type; "touchstart" === e ? h.touches += 1 : /^(touchend|touchcancel)$/.test(e) && setTimeout(function () { h.touches && (h.touches -= 1) }, 500) } }; return l.init = function (t) { var e = document.body; "duration" in (t = t || {}) && (v.duration = t.duration), "delay" in t && (v.delay = t.delay), m && (e.addEventListener("touchstart", c, !1), e.addEventListener("touchcancel", h.registerEvent, !1), e.addEventListener("touchend", h.registerEvent, !1)), e.addEventListener("mousedown", c, !1) }, l.attach = function (t, e) { t = a(t), "[object Array]" === f.call(e) && (e = e.join(" ")), e = e ? " " + e : ""; for (var n, o, i = 0, r = t.length; i < r; i++)o = (n = t[i]).tagName.toLowerCase(), -1 !== ["input", "img"].indexOf(o) && (p[o](n), n = n.parentElement), -1 === n.className.indexOf("waves-effect") && (n.className += " waves-effect" + e) }, l.ripple = function (t, e) { var n = (t = a(t)).length; if (e = e || {}, e.wait = e.wait || 0, e.position = e.position || null, n) for (var o, r, s, u = {}, c = 0, l = { type: "mousedown", button: 1 }; c < n; c++)if (o = t[c], r = e.position || { x: o.clientWidth / 2, y: o.clientHeight / 2 }, s = i(o), u.x = s.left + r.x, u.y = s.top + r.y, l.pageX = u.x, l.pageY = u.y, v.show(l, o), e.wait >= 0 && null !== e.wait) { var d = { type: "mouseup", button: 1 }; setTimeout(function (t, e) { return function () { v.hide(t, e) } }(d, o), e.wait) } }, l.calm = function (t) { for (var e = { type: "mouseup", button: 1 }, n = 0, o = (t = a(t)).length; n < o; n++)v.hide(e, t[n]) }, l.displayEffect = function (t) { l.init(t) }, l });</script>
</head>

<body>
  <div id="load">
    <p class="index-title">音樂的力量</p>
    <p class="index-icon"><svg t="1567819718363" class="icon" style="transform: translateY(40%)" viewBox="0 0 1024 1024"
        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1950" width="50" height="50">
        <path
          d="M268.2 89.2h498.9c92 0 166.3 74.3 166.3 166.3v498.9c0 92-74.3 166.3-166.3 166.3H268.2c-92 0-166.3-74.3-166.3-166.3V255.5c0-92 74.3-166.3 166.3-166.3z m0 0"
          fill="#D92916" p-id="1951"></path>
        <path
          d="M640 196.4c19.7 4.8 38.2 13.8 54.2 26.2 6.1 4.3 10.8 10.1 13.8 16.9 4.3 10.6 3.2 22.6-3.1 32.1-10.2 15.9-31.3 20.7-47.3 10.7-3.8-2.4-6.6-5.9-10.4-7.9-10.1-7.1-22.1-11.1-34.5-11.4-8.5 0.9-16.4 5-22.1 11.4-5.7 5.8-8.2 14.1-6.6 22.1l12.8 48c30.7 1.2 60.6 9.9 87 25.5 25.6 15.7 48.2 35.9 66.6 59.7 15.7 20.6 27.4 44.1 34.5 69 7.5 25.9 10.5 52.9 8.6 79.7-1.6 22.6-6.3 44.9-13.8 66.3-19.9 52.4-56.2 97-103.6 127-34.7 21.6-73.7 35.3-114.3 40-27.8 4.1-56.1 4.1-83.9 0-57.6-10-110.6-38.1-151.2-80.1-71-72-100.6-175.1-78.4-273.8 20.6-93.6 85.9-171 174.7-207.1 12.6-5 26.7-4.2 38.7 2.1 10.3 7.4 15.8 19.9 14.2 32.5-1.5 12.8-10 23.7-22.1 28.3-76.2 29-130.3 97.4-141.2 178.1-5 37.1-0.7 74.8 12.4 109.8 18.8 51.1 55.6 93.6 103.6 119.4 29.1 15.1 61.4 23 94.2 22.8 27-0.2 53.7-4.9 79.1-14.2 43.7-15.6 80.2-46.8 102.2-87.7 5.5-9.8 9.9-20.3 13.1-31.1 9.1-31.3 9.1-64.6 0-96-8-26.1-23.2-49.4-43.8-67.3-9-7.9-18.7-15-29-21.1-9.1-5-18.9-8.7-29-11 6.9 27.6 14.5 55.2 21.7 83.2l3.5 20c1.9 57.7-38.3 108.3-94.9 119.4-28.6 5.7-58.3 0.1-82.9-15.5-22.9-15.2-40.1-37.5-49-63.5-5.1-14.6-7.8-29.8-8.3-45.2-1.8-33.8 7.4-67.2 26.2-95.3 23.3-32.6 57.3-56 96-66.3l-8.3-32.1c-7-22.9-5.1-47.5 5.2-69 6.1-12 14.5-22.7 24.9-31.4 10.5-10.2 23.1-17.9 36.9-22.8 17.5-4.7 36-4.9 53.6-0.4z m0 0"
          fill="#FFFFFF" p-id="1952"></path>
        <path
          d="M497.4 448.4c-10.2 10.8-17.3 24.1-20.4 38.7-2.6 13.2-2.6 26.8 0 40 2.6 14.9 10.8 28.2 22.8 37.3 10.1 6.9 22.6 9.3 34.5 6.6 21.8-4.2 37.8-22.7 39-44.9-0.7-5.4-1.7-10.7-3.1-15.9l-23.8-90.1c-18.5 5-35.4 14.7-49 28.3z m0 0"
          fill="#D92916" p-id="1953"></path>
      </svg>网易云音乐</p>
  </div>
  <div id="app""></div>
    <!-- built files will be auto injected -->
    <script>
      const load = document.getElementById('load')
      const body = document.getElementsByTagName('body')[0]
      let data = sessionStorage.getItem('load');
      console.log(!data);
      if (!data) {
        setLoad(body, load)
      }

      function setLoad(body, load) {
        console.log('执行了');
        body.style.overflow = 'hidden';
        load.style.display = 'block';
        sessionStorage.setItem('load', 1);
        setTimeout(() => {
          load.style.display = 'none'
          body.style.overflow = '';
        }, 5000);
      }
    </script>
  </body>
</html>
